<template>
    <div class="PrimitivesAppearanceMaterialWithImage">
        <cesium-viewer @viewerAlready="viewerAlready"></cesium-viewer>
    </div>
</template>

<script>
    import CesiumViewer from "../../CesiumViewer";
    const image = require("../../../assets/images/cesium_credit.png");
    export default {
        name: "PrimitivesAppearanceMaterialWithImage",
        //import引入的组件需要注入到对象中才能使用",
        components: {CesiumViewer},
        data() {
            //这里存放数据",
            return {};
        },
        //监听属性 类似于data概念",
        computed: {},
        //监控data中的数据变化",
        watch: {},
        //方法集合",
        methods: {
            viewerAlready() {
                // window.viewer.scene.globe.depthTestAgainstTerrain = true; //设置该属性为 true\false，开启\关闭 地形遮盖(高程遮挡）
                this.PrimitiveAdd()
            },
            PrimitiveAdd() {
               window.viewer.scene.primitives.add(
                    new Cesium.Primitive({
                        geometryInstances: new Cesium.GeometryInstance({
                            geometry: new Cesium.RectangleGeometry({
                                rectangle: Cesium.Rectangle.fromDegrees(
                                    75, // 东
                                    20, // 南
                                    140, // 西
                                    40 // 北
                                ),
                                vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
                            }),
                        }),
                        appearance: new Cesium.EllipsoidSurfaceAppearance({
                            material : new Cesium.Material({
                                fabric: {
                                    type: "Image",
                                    uniforms: {
                                        image:image,
                                    },
                                },
                                aboveGround: false,
                            })
                        }),
                    })
                );
            }
        },
        //生命周期 - 创建之前",数据模型未加载,方法未加载,html模板未加载
        beforeCreate() {
        },

        //生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
        created() {

        },
        //生命周期 - 挂载之前",html模板未渲染
        beforeMount() {

        },

        //生命周期 - 挂载完成（可以访问DOM元素）",html模板已渲染
        mounted() {

        },

        //生命周期 - 更新之前",数据模型已更新,html模板未更新
        beforeUpdate() {

        },
        //生命周期 - 更新之后",数据模型已更新,html模板已更新
        updated() {

        },
        //生命周期 - 销毁之前",
        beforeDestroy() {

        },
        destroyed() {

        },
        //生命周期 - 销毁完成",
        //如果页面有keep-alive缓存功能，这个函数会触发",
        activated() {

        },
    }

</script>

<style>

</style>

